<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<pre>
      过滤器：

        就是用来对数据进行格式化，例如：时间、首字母...
    </pre>

		<div id="app">
			<!-- 过滤器使用方式：以 竖线 分隔，左侧是需要格式化的数据，右侧是过滤器 -->
			<p>{{ name | lower }}</p>
			<!-- 过滤器可以多个结合使用 -->
			<p>{{ name | lower | upper }}</p>

			<p v-bind:info="name | lower">123</p>
		</div>

		<script src="./scripts/vue.js"></script>
		<script>
			// 过滤器使用 Vue.filter() 方法进行定义
			// 第一个参数：过滤器名称
			// 第二个参数：回调函数
			// 在回调函数中，有一个参数，这个参数就是需要进行格式化的数据，也是竖线左侧的数据
			// 全局过滤器
			Vue.filter('lower', function (val) {
				return val.charAt(0).toLowerCase() + val.slice(1)
			})

			Vue.filter('upper', function (val) {
				return val.charAt(0).toUpperCase() + val.slice(1)
			})

			var vm = new Vue({
				el: '#app',
				data: {
					name: 'Tom',
				},
				// 局部过滤器
				filters: {
					lower: function (val) {
						return val.charAt(0).toLowerCase() + val.slice(1)
					},
				},
			})
		</script>
	</body>
</html>
